import React from 'react' // useState // FC,
import { Outlet, useLocation, useNavigate } from 'react-router-dom'
import styles from './ManageLayout.module.scss'
import { Button, Divider, Layout, message, Space } from 'antd'
import { BarsOutlined, DeleteOutlined, PlusCircleOutlined, StarOutlined } from '@ant-design/icons'
import { createQuestionService } from '../services/question'
import { useRequest } from 'ahooks'

const { Sider, Content } = Layout

const ManageLayout: React.FC = () => {
  const nav = useNavigate()
  const { pathname } = useLocation()
  /* const [loading, setLoading] = useState(false)
  async function handleCreateClick() {
    setLoading(true)
    const { id } = (await createQuestionService()) || {}
    setLoading(false)
    if (id) {
      nav({ pathname: `/question/edit/${id}` })
      message.success('创建成功')
    }
  } */

  const {
    loading,
    /* error ,*/
    run: handleCreateClick,
  } = useRequest(createQuestionService, {
    manual: true,
    onSuccess({ id }) {
      nav({ pathname: `/question/edit/${id}` })
      message.success('创建成功')
    },
  })

  return (
    <Layout className={styles.container}>
      <Sider className={styles.left}>
        <Space direction="vertical">
          <Button
            type="primary"
            size="large"
            icon={<PlusCircleOutlined />}
            disabled={loading}
            onClick={handleCreateClick}
          >
            新建问卷
          </Button>
          <Divider />
          <Button
            type={pathname.startsWith('/manage/list') ? 'default' : 'text'}
            size="large"
            icon={<BarsOutlined />}
            onClick={() => nav({ pathname: '/manage/list' })}
          >
            我的问卷
          </Button>
          <Button
            type={pathname.startsWith('/manage/star') ? 'default' : 'text'}
            size="large"
            icon={<StarOutlined />}
            onClick={() => nav({ pathname: '/manage/star' })}
          >
            星标问卷
          </Button>
          <Button
            type={pathname.startsWith('/manage/trash') ? 'default' : 'text'}
            size="large"
            icon={<DeleteOutlined />}
            onClick={() => nav({ pathname: '/manage/trash' })}
          >
            回收站
          </Button>
        </Space>
      </Sider>
      <Content className={styles.right}>
        <Outlet />
      </Content>
    </Layout>
  )
}

export default ManageLayout
